/* 评论与文章的间距 */
div#post-comment {
  margin-top: 2rem;
}
/* 评论功能模块标题字号 */
#post-comment .comment-head {
  font-size: 0.8em !important;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.comment-randomInfo {
  margin-left: auto;
  font-size: 13px;
}
.comment-randomInfo:hover a {
  color: var(--heo-theme);
}
#post-comment .comment-tips {
  background-color: rgba(103, 194, 58, 0.13);
  border: var(--style-border-always);
  border-color: var(--heo-green);
  color: var(--heo-green);
  border-radius: 8px;
  padding: 8px 12px;
  margin-top: 0.5rem;
  display: none;
  width: 100%;
}
#post-comment>div.comment-head>div.comment-privacy {
  display: block;
  justify-content: space-between;
  margin-left: 8px;
  font-size: 13px;
}
a {
  background-color: transparent;
  color: var(--heo-fontcolor);
  text-decoration: none;
  transition: all 0.2s ease 0s;
  overflow-wrap: break-word;
  -webkit-user-drag: none;
}
#post-comment .comment-tips.show {
  display: flex;
  font-weight: bold;
}
/* 头像 */
.tk-avatar {
  width: 32px !important;
  height: 32px !important;
  box-shadow: var(--heo-shadow-border);
  margin-right: 16px !important;
}

.tk-avatar.tk-has-avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 32px !important;
}
/* 分割线 */
hr {
  display: none !important;
}
.tk-expand {
  background: var(--heo-card-bg) !important;
  color: var(--heo-fontcolor) !important;
  border: var(--style-border-always);
  box-shadow: var(--heo-shadow-border);
  border-radius: 12px;
  -webkit-user-select: none;
}

.tk-expand:hover {
  background: var(--heo-theme) !important;
  color: var(--heo-white) !important;
}
.tk-row .tk-avatar {
  display: none;
}

.tk-avatar .tk-avatar-img:hover {
  transform: rotate(360deg);
}

img.tk-avatar-img {
  height: 32px !important;
  border-radius: 32px;
  border: var(--style-border-always);
}
/* 评论输入框提示 */
/* 设置文字内容 :nth-child(1)的作用是选择第几个 */
.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(2):before {
  content: '输入QQ号会自动获取昵称和头像';
}

.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(3):before {
  content: '收到回复将会发送到你的邮箱';
}

.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(4):before {
  content: '可以通过昵称访问你的网站';
}
/* 当用户点击输入框时显示 */
.el-input.el-input--small.el-input-group.el-input-group--prepend:focus-within::before {
  display: block;
  animation: commonTipsIn 0.3s;
}

.el-input.el-input--small.el-input-group.el-input-group--prepend:focus-within::after {
  display: block;
  animation: commonTriangleIn 0.3s;
}

@keyframes commonTipsIn {
  0% {
    top: -50px;
    opacity: 0;
  }

  100% {
    top: -60px;
    opacity: 1;
  }
}

@keyframes commonTriangleIn {
  0% {
    transform: translate(-50%, -36px);
    opacity: 0;
  }

  100% {
    transform: translate(-50%, -46px);
    opacity: 1;
  }
}

/* 主内容区 */
.el-input.el-input--small.el-input-group.el-input-group--prepend::before {
  /* 先隐藏起来 */
  display: none;
  /* 绝对定位 */
  position: absolute;
  /* 向上移动60像素 */
  top: -60px;
  /* 文字强制不换行，防止left:50%导致的文字换行 */
  white-space: nowrap;
  /* 圆角 */
  border-radius: 10px;
  /* 距离左边50% */
  left: 50%;
  /* 然后再向左边挪动自身的一半，即可实现居中 */
  transform: translate(-50%);
  /* 填充 */
  padding: 14px 18px;
  background: #444;
  color: #fff;
  z-index: 100;
}

/* 小角标 */
.el-input.el-input--small.el-input-group.el-input-group--prepend::after {
  display: none;
  content: '';
  position: absolute;
  /* 内容大小（宽高）为0且边框大小不为0的情况下，每一条边（4个边）都是一个三角形，组成一个正方形。
  我们先将所有边框透明，再给其中的一条边添加颜色就可以实现小三角图标 */
  border: 12px solid transparent;
  border-top-color: #444;
  left: 50%;
  transform: translate(-50%, -46px);
}

/* 昵称 */
.tk-nick {
  font-size: 1rem !important;
  line-height: 32px;
}

/* 填写项标题 */
.el-input-group__append, .el-input-group__prepend {
  background-color: var(--heo-card-bg) !important;
  color: var(--heo-fontcolor) !important;
  border-color: var(--heo-card-border) !important;
  border: var(--style-border)!important;
  font-weight: bold;
}

/* 输入框 */
.el-input__inner {
  background: var(--heo-background) !important;
  border: 1px solid var(--heo-card-border) !important;
  color: var(--heo-fontcolor) !important;
  padding-left: 8px;
}

.page .el-input__inner {
  background: var(--heo-card-bg) !important;
}

.el-input__inner:focus {
  border: 1px solid var(--heo-main) !important;
}

/* 评论输入框 */
.el-textarea__inner {
  background: var(--heo-background) !important;
  color: var(--heo-fontcolor) !important;
  border-radius: 12px !important;
  min-height: 100px !important;
  padding: 16px 16px 40px 16px !important;
  border: var(--style-border-always) !important;
}

@media screen and (max-width: 768px) {
  .el-textarea__inner {
    border-radius: 4px !important;
    background: var(--heo-card-bg) !important;
  }
}

#page .el-textarea__inner {
  background: var(--heo-card-bg) !important;
  box-shadow: var(--heo-shadow-border);
}

.el-textarea__inner:focus {
  border: var(--style-border-hover-always) !important;
  box-shadow: var(--heo-shadow-main);
}

#page .tk-meta-input .el-input {
  box-shadow: var(--heo-shadow-border);
}
/* 评论数量字号 */
#twikoo>div.tk-comments>div.tk-comments-container>div.tk-comments-title>span:nth-child(1) {
  display: none !important;
}

/* 加载时背景颜色 */
.el-loading-mask {
  background-color: none !important;
}
/* 所有标签 */
.tk-tag {
  margin-left: 4px;
}

/* 评论博主标签圆角 */
.tk-tag-green {
  border-radius: 4px !important;
  border: 0px solid #e1f3d8 !important;
  font-size: 0.5rem !important;
}

[data-theme=dark] .tk-tag-green {
  background-color: #67c23a21 !important;
}

/* 审核中的评论 */
.tk-tag-yellow {
  border-radius: 4px !important;
  border: 0px solid #e1f3d8 !important;
  font-size: 0.5rem !important;
}

[data-theme=dark] .tk-tag-green {
  background-color: #c0c23a21 !important;
}

/* 评论置顶 */
.tk-tag-red {
  border-radius: 4px !important;
  border: 0px solid #f3d8d8 !important;
  font-size: 0.5rem !important;
}

[data-theme=dark] .tk-tag-red {
  background-color: #c23a3a21 !important;
}

/* 预览按钮 */
.el-button {
  background-color: var(--heo-fontcolor) !important;
  border: 0px solid var(--heo-main) !important;
  color: var(--heo-background) !important;
  border-radius: 8px !important;
}

.el-button:hover {
  background: var(--heo-main) !important;
  color: var(--heo-white) !important;
}

.el-button.tk-preview {
  display: none !important;
}

#twikoo>div.tk-comments>div.tk-submit>div.tk-row.actions>a {
  display: none !important;
}

#twikoo {
  z-index: 102;
}

.tk-meta {
  display: flex;
  align-items: center;
}
/* 取消按钮 */
button.el-button.tk-cancel.el-button--default.el-button--small {
  background: var(--heo-secondbg) !important;
  border-radius: 8px !important;
  color: var(--heo-fontcolor) !important;
}

.tk-submit-action-icon.__markdown {
  display: none;
}
.tk-extra {
  background: var(--heo-card-bg);
  border: var(--style-border-always);
  padding: 1px 5px 1px 2px;
  border-radius: 8px;
  margin-right: 4px !important;
  color: var(--heo-secondtext) !important;
  display: inline !important;
  margin-top: 6px !important;
  font-size: 0.5rem;
}

.tk-extra .tk-icon {
  display: none;
}
.tk-replies .tk-content span:first-child {
  font-size: 0.5rem;
  color: var(--heo-secondtext);
}
.tk-replies>.tk-comment {
  background: var(--heo-card-bg);
  border-top: var(--style-border-dashed);
  border-radius: 12px;
  padding: 0;
  transition: 0.3s;
  padding-top: 1rem;
  margin-top: 0;
}

.tk-content p {
  margin: 0px !important;
}
